<template>
  <uni-nav-bar title="兑换商品" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package center" style="justify-content: space-around;">
    <view class="column lis" v-for="(item,index) in list" :key="item.name" @click="change(index)">
      <view :style="{color:current===index?'#333':'#666'}">{{item.name}}</view>
      <view :style="{background:current===index?'#1B91FF':'#fff'}"></view>
    </view>
  </view>
  <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
    :style="{ height: pageHeight + 'px' }">
    <view class="package space-between list" v-for="(item,index) in orderLists" :key="item.id"
      @click="item.status===1?navTo('pointsMall/orderDetail?id='+item.order_id):''"
      :style="{marginTop:index===0?'0px':'15rpx'}">
      <image :src="item.image" mode=""></image>
      <view class="space-between" style="width:76%;">
        <view class="direction-start" style="height:153rpx;justify-content:space-around;width:80%;">
          <view>{{item.name}}</view>
          <view class="center"><text style="color:#1B91FF;font-size: 38rpx;margin-right: 10rpx;">{{item.score}}</text>积分
          </view>
          <!-- <view style="color:#999;font-size: 26rpx;">库存：{{item.stock}}</view> -->
        </view>
        <view class="direction-start" style="height:153rpx;justify-content:space-between;align-items: flex-end;">
          <view :style="{color:item.status===0?'#58A9FD':''}">{{item.status_name}}</view>
          <view class="but" @click.stop="convert(item.delivery_type,item.id,item.name)" v-if="item.status!==1">立即兑换</view>
        </view>
      </view>
    </view>
    <Popu v-if="orderLists.length<1" :pageHeight="pageHeight" text="暂无兑换商品"></Popu>
  </scroll-view>
  <!-- 实体商品发货 -->
  <ExchangePop ref="exchange" :id="shopID" @submit="change(0)"></ExchangePop>
  <!-- 虚拟商品发货 -->
  <ExchangeVip ref="virtually" :id="shopID" @submit="change(1)"></ExchangeVip>
</template>

<script setup lang="ts">
  import { navBack, navTo } from '@/utils/navigator';
  import ExchangePop from '@c/mine/exchangePop.vue';
  import ExchangeVip from '@c/mine/exchangeVip.vue';
  import Popu from '@c/earthPushing/common/popu.vue';
  import { myGoodsList } from '@/gql/integral';
  import { toPublish } from '@mqtt';
  import { ref } from 'vue';
  import { getDriverID } from '@/stores/driverID';
  const driver_id = getDriverID();
  const list = [{ name: '已兑换' }, { name: '未兑换' }]
  const current = ref(0)
  const exchange = ref(null)
  const virtually = ref(null)
  const orderLists = ref([]);
  const isLoading = ref(false);
  const lastPage = ref(1);
  const currentPage = ref(1);
  const shopID = ref()
  const pageHeight = ref()
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = (res.windowHeight - 120).toString();
    },
  });
  init()
  function init() {
    isLoading.value = true;
    const payload = {
      query: myGoodsList,
      variables: {
        driver_id,
        page: currentPage.value,
        status: current.value === 1 ? 0 : 1
      },
    };
    toPublish(
      'ql/score/myGoodsList',
      payload,
      (obj : any) => {
        const { myGoodsList } = obj.data;
        isLoading.value = false;
        orderLists.value = [...orderLists.value, ...myGoodsList.list];
        lastPage.value = myGoodsList.lastpage;
      }
    );
  }
  /**
   * 加载更多
   */
  function loadMore() {
    if (currentPage.value < lastPage.value) {
      currentPage.value++;
      init();
    }
  }
  function convert(num : number, id : number, name : string) {
    shopID.value = id
    if (num === 2) {
      virtually.value.open()
    } else {
      exchange.value.shares(name, id)
    }
  }
  function change(index : number) {
    current.value = index
    orderLists.value = []
    currentPage.value = 1
    init();
  }
</script>

<style scoped lang="less">
  .list {
    image {
      width: 153rpx;
      height: 153rpx;
      border-radius: 5px;
    }

    .but {
      width: 140rpx;
      height: 52rpx;
      background: #1B91FF;
      border-radius: 5px;
      text-align: center;
      line-height: 52rpx;
      color: #fff;
    }
  }

  .lis {
    color: #666;

    view:nth-of-type(2) {
      width: 67rpx;
      height: 8rpx;
      margin-top: 10rpx;
      border-radius: 5px;
    }
  }
</style>